{% block sw_media_folder_info %}
<div class="sw-media-folder-info">
    {% block sw_media_quickinfo_folder_quickactions %}
    <sw-media-collapse
        v-if="editable"
        :title="$tc('sw-media.sidebar.sections.actions')"
        :expand-on-loading="true"
    >

        {% block sw_media_quickinfo_folder_quickactions_content %}
        <template #content>
            <ul class="sw-media-sidebar__quickactions-list">
                {% block sw_media_quickinfo_folder_quickactions_move %}
                <li
                    v-tooltip="{
                        message: $tc('sw-privileges.tooltip.warning'),
                        disabled: acl.can('media.editor'),
                        showOnDisabledElements: true
                    }"
                    class="quickaction--move"
                    :class="quickActionClasses(!acl.can('media.editor'))"
                    role="button"
                    tabindex="0"
                    @click="openModalMove"
                    @keydown.enter="openModalMove"
                >
                    <mt-icon
                        class="sw-media-sidebar__quickactions-icon"
                        size="16px"
                        name="regular-file-export"
                    />
                    {{ $tc('sw-media.sidebar.actions.move') }}
                </li>
                {% endblock %}

                {% block sw_media_quickinfo_folder_quickactions_settings %}
                <li
                    class="sw-media-sidebar__quickaction quickaction--settings"
                    role="button"
                    tabindex="0"
                    @click="openFolderSettings"
                    @keydown.enter="openFolderSettings"
                >
                    <mt-icon
                        class="sw-media-sidebar__quickactions-icon"
                        size="16px"
                        name="regular-cog"
                    />
                    {{ $tc('sw-media.sidebar.actions.settings') }}
                </li>
                {% endblock %}

                {% block sw_media_quickinfo_folder_quickactions_dissolve %}
                <li
                    v-tooltip="{
                        message: $tc('sw-privileges.tooltip.warning'),
                        disabled: acl.can('media.editor'),
                        showOnDisabledElements: true
                    }"
                    class="quickaction--dissolve"
                    :class="quickActionClasses(!acl.can('media.editor'))"
                    role="button"
                    tabindex="0"
                    @click="openFolderDissolve"
                    @keydown.enter="openFolderDissolve"
                >
                    <mt-icon
                        class="sw-media-sidebar__quickactions-icon"
                        size="16px"
                        name="regular-spinner-star"
                    />
                    {{ $tc('sw-media.sidebar.actions.dissolve') }}
                </li>
                {% endblock %}

                {% block sw_media_quickinfo_folder_quickactions_delete %}
                <li
                    v-tooltip="{
                        message: $tc('sw-privileges.tooltip.warning'),
                        disabled: acl.can('media.deleter'),
                        showOnDisabledElements: true
                    }"
                    class="quickaction--delete is--danger"
                    :class="quickActionClasses(!acl.can('media.deleter'))"
                    role="button"
                    tabindex="0"
                    @click="openModalDelete"
                    @keydown.enter="openModalDelete"
                >
                    <mt-icon
                        class="sw-media-sidebar__quickactions-icon is--danger"
                        size="16px"
                        name="regular-trash"
                    />
                    {{ $tc('sw-media.sidebar.actions.delete') }}
                </li>
                {% endblock %}
            </ul>
        </template>
        {% endblock %}
    </sw-media-collapse>
    {% endblock %}

    {% block sw_media_quickinfo_folder_metadata %}
    <sw-media-collapse
        :expand-on-loading="true"
        :title="$tc('sw-media.sidebar.sections.metadata')"
    >

        {% block sw_media_quickinfo_folder_metadata_content %}
        <template #content>
            <dl class="sw-media-sidebar__metadata-list">
                {% block sw_media_quickinfo_folder_metadata_content_base %}
                <sw-media-quickinfo-metadata-item
                    class="sw-media-quickinfo-metadata-name"
                    :class="nameItemClasses"
                    :label-name="$tc('sw-media.sidebar.metadata.name')"
                    :truncated="false"
                >
                    <sw-confirm-field
                        v-if="editable"
                        ref="inlineEditFieldName"
                        :disabled="!acl.can('media.creator')"
                        compact
                        :value="mediaFolder.name"
                        :error="mediaFolderNameError"
                        @input="onChangeFolderName"
                    />
                    <template v-else>
                        {{ mediaFolder.name }}
                    </template>
                </sw-media-quickinfo-metadata-item>

                <sw-media-quickinfo-metadata-item
                    class="sw-media-quickinfo-metadata-createdAt"
                    :label-name="$tc('sw-media.sidebar.metadata.createdAt')"
                >
                    {{ createdAt }}
                </sw-media-quickinfo-metadata-item>
                {% endblock %}
            </dl>
        </template>
        {% endblock %}
    </sw-media-collapse>
    {% endblock %}

    {% block sw_media_folder_info_settings_modal %}
    <sw-media-modal-folder-settings
        v-if="showFolderSettings"
        :disabled="!acl.can('media.editor')"
        :media-folder-id="mediaFolder.id"
        @media-settings-modal-save="closeFolderSettings"
        @media-settings-modal-close="closeFolderSettings"
    />
    {% endblock %}

    {% block sw_media_folder_info_dissolve_modal %}
    <sw-media-modal-folder-dissolve
        v-if="showFolderDissolve"
        :items-to-dissolve="[mediaFolder]"
        @media-folder-dissolve-modal-dissolve="onFolderDissolved"
        @media-folder-dissolve-modal-close="closeFolderDissolve"
    />
    {% endblock %}

    {% block sw_media_folder_info_move_modal %}
    <sw-media-modal-move
        v-if="showModalMove"
        :items-to-move="[mediaFolder]"
        @media-move-modal-close="closeModalMove"
        @media-move-modal-items-move="onFolderMoved"
    />
    {% endblock %}

    {% block sw_media_folder_info_modal_delete %}
    <sw-media-modal-delete
        v-if="showModalDelete"
        :items-to-delete="[mediaFolder]"
        @media-delete-modal-close="closeModalDelete"
        @media-delete-modal-items-delete="deleteSelectedItems"
    />
    {% endblock %}
</div>
{% endblock %}
